
<!doctype html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

	 <style>
		  .test { margin: 4px; font-size:16px; font-weight:bolder; }
		  .blue { color:blue; }
		  .under { text-decoration:underline; }
		  .highlight { background:yellow; }
	 </style>
	 <script src="http://code.jquery.com/jquery-latest.js"></script>
	<title></title>
</head>
<body>

<p class="under">Goodbye</p>

<button id="addClass">模拟jQuery的addClass("blue highlight under")方法</button>
<button id="removeClass">模拟jQuery的removeClass("blue highlight under")方法</button>

<script type="text/javascript">
	
	var p = $("p")[0];

    ///////////
    //增加多个样式 //
    ///////////
    $("#addClass").click(function(){
         addClass(p, "blue highlight under")
    })


    $("#removeClass").click(function(){
         removeClass(p, "blue highlight under")
    })


    $("#addClassCallback").click(function(){
         removeClass(p, "blue highlight under")
    })


    /////////
    //增加样式 //
    /////////
    function addClass(elem,value) {   

        var classes, cur, clazz, j, finalValue
        // 如果参数是多个样式设置"blue highlight under"按照\/S+\g空格分割
        classes = (value || "").match(/\S+/g) || [];

        //如果是元素节点，并且有class属性
        //拼接成 " blue highlight under "形式，加上前后空格
        cur = elem.nodeType === 1 && (elem.className ?
            (" " + elem.className + " ").replace(/[\t\r\n\f]/g, " ") :
            " "
        );

        //如果存在样式
        if (cur) {
            j = 0;
            while ((clazz = classes[j++])) {
                //查找下是否不是有重复的，没有就叠加
                if (cur.indexOf(" " + clazz + " ") < 0) {
                    cur += clazz + " ";
                }
            }

            // 去掉前后的空格
            finalValue = jQuery.trim(cur);

            if (elem.className !== finalValue) {
                //赋值
                elem.className = finalValue;
            }
        }
    }





    /////////
    //移除样式 //
    /////////
    function removeClass(elem, value) {

        var classes, cur, clazz, j, finalValue
            // 如果参数是多个样式设置"blue highlight under"按照\/S+\g空格分割
        classes = (value || "").match(/\S+/g) || [];

        //如果是元素节点，并且有class属性
        //拼接成 " blue highlight under "形式，加上前后空格
        cur = elem.nodeType === 1 && (elem.className ?
            (" " + elem.className + " ").replace(/[\t\r\n\f]/g, " ") :
            " "
        );

        //如果存在样式
        if (cur) {
            j = 0;
            while ((clazz = classes[j++])) {
                //与addClass的区别在这里
                while (cur.indexOf(" " + clazz + " ") >= 0) {
                    cur = cur.replace(" " + clazz + " ", " ");
                }
            }

            // 去掉前后的空格
            finalValue = jQuery.trim(cur);

            if (elem.className !== finalValue) {
                //赋值
                elem.className = finalValue;
            }
        }
    }


    


</script>
</body>
</html>